<template>
  <div class="text_group">
    <!-- 组件结构 -->
    <!-- 组件容器 -->
    <div class="input_group" :class="{'is-invalid':error}"></div>
    <!-- 输入框 -->
    <input
      :type="type"
      :value="value"
      :placeholder="placeholder"
      :name="name"
      @input="$emit('input', $event.target.value)"
    />
    <!-- 点击获取按钮 -->
    <button v-if="btnTitle" :disabled="disabled" @click="$emit('btnClick')">
      {{ btnTitle }}
    </button>
    <!-- 错误提醒 -->
    <div v-if="error" class="invalid-feedback">{{ error }}</div>
  </div>
</template>
<script>
export default {
  name: "inputGroup",
  props: {  
    type: {
      type:"String",
      default: "text",
    },
    value: "String",
    placeholder: "String",
    name: "String",
    btnTitle: "String",
    disabled: "Boolean",
    error: "String",
  },
};
</script>

<style>
.button {
  height: 40px;
  background-color: #00a1d6;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  border-radius: 4px;
}
.input_group button[disabled]{
    color: #aaa;
}
.is-invalid{
  border:1px solid #F56C6C
}
.invalid-feedback{
    color: #F56C6C;
    padding-top: 5px;
}

</style>